
import {defineComponent, ref, reactive, toRefs, watch, h, inject, onMounted} from 'vue'


export default defineComponent({
    components: {

    },
    setup() {
        const state = reactive({
            time: {
                hour: "",
                minitus: "",
                seconds: ""
            },
            nowTime: "",
            week: [
                "星期天",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六"
            ]
        })
        const methods = {
            dateTime() {
                methods.timeFormate();
                setTimeout(() => {
                    this.dateTime();
                }, 1000);
            },
            timeFormate() {
                const newtime = new Date();
                state.time.hour = methods.getIncrease(newtime.getHours(), 2);
                state.time.minitus = methods.getIncrease(newtime.getMinutes(), 2);
                state.time.seconds = methods.getIncrease(newtime.getSeconds(), 2);
                state.nowTime =
                    methods.getIncrease(newtime.getFullYear(), 4) +
                    "年" +
                    methods.getIncrease(newtime.getMonth() + 1, 2) +
                    "月" +
                    methods.getIncrease(newtime.getDate(), 2) +
                    "日 " +
                    state.week[newtime.getDay()];
                return `${state.time.hour}:${state.time.minitus}:${state.time.seconds}`;
            },
            getIncrease(num:number, digit:number) {
                let increase = "";
                for (let i = 0; i < digit; i++) {
                    increase += "0";
                }
                return (increase + num).slice(-digit);
            }
        }
        onMounted(()=>{
            methods.dateTime()
        })
        return {
            ...toRefs(state),
            methods
        }
    }
})
